<template>
  <v-label
    :config="config"
    @transformend="handleTransformEnd"
    @dragend="handleDragEnd"
  >
    <v-tag
      :config="{
        ...tagConfig,
        fill: config.bgColor,
        shadowColor: config.bgColor,
      }"
    />
    <v-text
      :config="{
        ...textConfig,
        text: config.text,
        fill: config.fontColor,
        fontSize: config.fontSize,
      }"
    />
  </v-label>
</template>

<script>
export default {
  name: "XLabel",
  props: {
    config: {
      type: Object
    }
  },
  mounted () {
  },
  methods: {
    handleTransformEnd (...p) {
      this.$emit('transformend', ...p)
    },
    // eslint-disable-next-line no-unused-vars
    handleDragEnd (...p) {
      console.log('调用了这个drag')
      this.$emit("dragend", ...p);
    },
  },
  data () {
    return {
      tagConfig: {

        pointerDirection: 'none',
        pointerWidth: 10,
        pointerHeight: 10,
        lineJoin: 'round',

        shadowBlur: 10,
        shadowOffset: 10,
        shadowOpacity: 0.5
      },
      textConfig: {
        fontFamily: 'Calibri',

        padding: 5,

      }
    };
  },
}
</script>
